<!--
 * @Author: 无聊 7989314+Hwz1997@user.noreply.gitee.com
 * @Date: 2025-07-08 08:35:19
 * @LastEditors: 无聊 7989314+Hwz1997@user.noreply.gitee.com
 * @LastEditTime: 2025-07-08 14:14:54
 * @FilePath: \keep_motion_manger\src\components\importDialog\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <el-dialog title="导入" width="500px" :model-value="visible" destroy-on-close :before-close="beforeClose">
        <el-upload
            class="avatar-uploader"
            :action="`${baseUrl}${props.importUrl}`"
            :headers="uploadHeaders"
            :show-file-list="false"
            :on-success="handleSuccess"
            drag
            :before-upload="beforeAvatarUpload"
        >
            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
            <div class="el-upload__text">
                拖拽文件到此或者<em>点击上传</em>
            </div>
        </el-upload>
        <div class="upload-tips">
            <p>上传文件不能超过{{ maxSize / 1024 / 1024 }}MB</p>
            <p>支持格式：{{ fileType.join('、') }}</p>
            <p>
                模板下载：
                <el-link type="primary" href="#">模板下载</el-link>
            </p>
        </div>
    </el-dialog>
</template>

<script setup>
import { computed } from 'vue';
import { ElMessage } from 'element-plus';
const baseUrl = import.meta.env.VITE_BASE_URL;

const props = defineProps({
    visible: {
        type: Boolean,
        default: () => false
    },
    maxSize: {
        type: Number,
        default: () => 5 * 1024 * 1024
    },
    fileType: {
        type: Array,
        default: () => ['xlsx', 'xls', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet']
    },
    importUrl: {
        type: String,
        default: () => ''
    }
});

const emit = defineEmits(['close']);
const uploadHeaders = computed(() => {
    return {
        Authorization: sessionStorage.getItem("role") + ' ' + sessionStorage.getItem('token'),
    }
})

// 上传前
const beforeAvatarUpload = (file) => {
    const isExcel = props.fileType.includes(file.type);
    const isLt2M = file.size / 1024 / 1024 < props.maxSize;
    if (!isExcel) {
        ElMessage.error(`上传文件只能是${props.fileType.join('、')}格式!`);
    }
    if (!isLt2M) {
        ElMessage.error(`上传文件大小不能超过${props.maxSize / 1024 / 1024}MB!`);
    }
    return isExcel && isLt2M;
};
// 上传成功
const handleSuccess = (res) => {
    if (res.code === 200) {
        ElMessage.success('上传成功');
        emit('close');
    }
};

// 关闭前
const beforeClose = (done) => {
    emit('close');
};


</script>